<template>
  <!-- action="http://47.97.79.225:9020/fileMgr/v1/oss/upload/aliyun" -->
  <div>
    <!-- 筛选上传的格式 accept=".mp4,.flv"  -->
    <el-upload
      action=""
      accept=".mp4,.flv,.ogg,.avi,.wmv,.rmvb,.mov"
      list-type=".mp4"
      :http-request="requestHttp"
      :show-file-list="false"
      :on-success="successHandle"
      v-loading.fullscreen.lock="fullscreenLoading"
      :before-upload="beforeUploadHandle"
    >
      <video
        v-if="videoUrl"
        :src="videoUrl"
        class="avatar"
        controls="controls"
        style="width:300px"
      ></video>
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
    <el-button v-if="videoUrl" @click="deleteVideo">删除</el-button>
  </div>
</template>

<script>
import axios from 'axios'
import Vue from 'vue'
export default {
  props: {
    videoUrl: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      visible: false,
      url: '',
      num: 0,
      successNum: 0,
      fullscreenLoading: false
    }
  },
  watch: {
    videoUrl(n) {
      this.videoUrl = n
    }
  },
  methods: {
    deleteVideo() {
      console.log('del video')
      this.$emit('updataVideo', null)
    },
    handleRemove(file, fileList) {
      let removeArr = []
      if (fileList.length > 0) {
        fileList.forEach(element => {
          removeArr.push(this.topUrl + '/' + element.name)
        })
        this.updataArr = removeArr
      } else {
        this.updataArr = fileList
      }
      this.$emit('updataVideo', this.updataArr)
    },

    // 上传之前
    beforeUploadHandle(file) {
      if (
        [
          'video/mp4',
          'video/ogg',
          'video/flv',
          'video/avi',
          'video/wmv',
          'video/rmvb',
          'video/mov'
        ].indexOf(file.type) == -1
      ) {
        this.$message({
          message: '请上传正确的视频格式',
          type: 'warning'
        })
        return false
      } else {
        // 获取视频时长
        let url = URL.createObjectURL(file)
        let audioElement = new Audio(url)
        let duration
        audioElement.addEventListener('loadedmetadata', function(_event) {
          duration = audioElement.duration // 时长为秒，小数，182.36
        })
      }
    },
    // 随机生成文件名
    random_string(len) {
      len = len || 32
      var chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz123456789'
      var maxPos = chars.length
      var pwd = ''
      for (let i = 0; i < len; i++) {
        pwd += chars.charAt(Math.floor(Math.random() * maxPos))
      }
      return pwd
    },
    requestHttp(file) {
      let that = this
      let formData = new FormData()
      formData.append('file', file.file)
      let config = {
        headers: {
          token: Vue.cookie.get('token'),
          'Content-Type': 'multipart/form-data'
        }
      }
      this.fullscreenLoading = true
      axios
        .post(
          `${this.$config.SERVER_URL}/admin/sys/oss/upload`,
          formData,
          config
        )
        .then(obj => {
          this.fullscreenLoading = false
          if (obj.status == 200) {
            let videoUrl = obj.data.data.url
            this.fullscreenLoading = false
            let dic = {}
            dic.size = file.file.size / 1024 / 1024
            let url = URL.createObjectURL(file.file)
            let audioElement = new Audio(url)
            audioElement.addEventListener('loadedmetadata', function(_event) {
              dic.duration = audioElement.duration //时长为秒，小数，182.36
              that.$emit('updataVideo', videoUrl, dic)
            })
          }
        })
    },

    // 上传成功
    successHandle(response, file, fileList) {
      console.log(file, fileList)
      this.successNum++
    }
  }
}
</script>
<style scoped>
.avatar-uploader-icon {
  background-color: #fbfdff;
  border: 1px dashed #c0ccda;
  border-radius: 6px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 148px;
  height: 148px;
  line-height: 146px;
  vertical-align: top;
}
</style>
